<template>
  <Table
      :data="products"
      :columns="columns"
      :virtualScroll="true"
      :row-selection="true"
      v-model:selected-rows="selected"
      @row-click="showDetail"
  />
</template>

<script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'

// 模拟产品数据
const products = ref([
  { id: 1, name: 'iPhone 15', price: 6999, stock: 100, category: '手机' },
  { id: 2, name: 'MacBook Pro', price: 12999, stock: 50, category: '笔记本' },
  { id: 3, name: 'iPad Air', price: 4799, stock: 80, category: '平板' },
  { id: 4, name: 'AirPods Pro', price: 1999, stock: 200, category: '耳机' },
  { id: 5, name: 'Apple Watch', price: 3299, stock: 150, category: '智能手表' },
  { id: 6, name: 'iMac', price: 15999, stock: 30, category: '台式机' },
  { id: 7, name: 'Magic Keyboard', price: 999, stock: 120, category: '配件' },
  { id: 8, name: 'Magic Mouse', price: 699, stock: 180, category: '配件' },
  { id: 9, name: 'HomePod', price: 2499, stock: 60, category: '智能音箱' },
  { id: 10, name: 'Mac mini', price: 5999, stock: 40, category: '台式机' }
])

const selected = ref([])

// 扩展列配置，添加更多有用的信息
const columns = [
  { title: '产品名称', dataIndex: 'name' },
  { title: '价格', dataIndex: 'price', 
    render: (price) => `¥${price.toLocaleString()}` },
  { title: '库存', dataIndex: 'stock' },
  { title: '分类', dataIndex: 'category' }
]

function showDetail(row) {
  console.log('查看详情:', row)
}
</script>

<style scoped>
.table-container {
  padding: 20px;
}
</style>